import React, { memo, useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { useHistory } from 'react-router-dom'
import Scroll from '../../baseUI/scroll'
import './Main.css'
import * as api from '@/api'
import * as actionTypes from './store/actionCreators'
import Classify from '../../components/main/classify/Classify.jsx'
import MenuBar from '../../components/main/menuBar/MenuBar'
import SearchInput from '../../components/search/searchInput/SearchInput'
import CheapList from '../../components/main/cheapList/CheapList'
import ListData from '../../components/main/listData/ListData'
import MainBottomChooseCopy from 
    '@/components/main/mainBottomChooseCopy/MainBottomChooseCopy'
import MainPop from '../../components/main/mainPop/MainPop'
// import TimeBack from '../../components/main/timeBack/TimeBack.jsx'

const Main = (props) => {
    const history = useHistory()
    let [list, setList] = useState([])
    const [showPop, setShowPop] = useState(false)
    const { maindata } = props
    const [menuDisplay, setMenuDisplay] = useState(0)
    const { classify = [], menuBarData = {}, listItems = [] } = maindata
    const { getMainDataDispatch } = props
    let [page, setPage] = useState(1)
    console.log(maindata)
    const fetchList = () => {
        api
            .reqlist(page)
            .then(res => {
                setList([
                    ...list,
                    ...res.data.data.list
                ])
            })
    }
    const handleOnclick = () => {
        // popup 组件的显示？
        setShowPop(!showPop)
    }
    useEffect(() => {
        if (!maindata.length) {
            getMainDataDispatch()
        }
        fetchList()
    }, [])

    useEffect(() => {
        fetchList()
    }, [page])
    useEffect(() => {
        getMainDataDispatch();
    }, [])
    // 上拉加载更多
    const handlePullUp = () => {
        setPage(++page)
    }
    // 下拉刷新
    const handlePullDown = () => {
    }

    return (
        <div className='main'>
            <SearchInput handleOnclick={() => {handleOnclick()}}/>
            <Scroll
                direction={"vertical"}
                refresh={true}
                onScroll={
                    (e) => {
                        // console.log(e.y)
                        if (e.y < -445) {
                            setMenuDisplay(1)
                        } else {
                            setMenuDisplay(0)
                        }
                        // forceCheck()
                    }
                }
            >
                <div className="main-padding">
                    {/* <Classify classify={classify}/> */}
                    <MenuBar menuBarData={menuBarData} />
                    <CheapList />
                    {/* <TimeBack /> */}
                    <Classify classify={classify} />
                    <ListData list={list} listItems={listItems} />
                </div>
            </Scroll>
            <MainBottomChooseCopy display={menuDisplay} listItems={listItems} />
            <MainPop handleOnclick={ handleOnclick} display={showPop} />
        </div>
    )
}

const mapStateToProps = (state) => {
    // console.log(state,'//////');
    return {
        maindata: state.main.maindata
    }
}

const mapStateToDispatch = (dispatch) => {
    return {
        getMainDataDispatch() {
            dispatch(actionTypes.getMainData())
        }
    }
}

export default connect(mapStateToProps, mapStateToDispatch)(memo(Main))